<template>
    <div>
        <el-dialog title="标签设置" width="800px" :visible.sync="dialogVisible">
            <div class="action-box">
                <div class="box left">
                    <div class="title">可添加项</div>
                    <div class="tag-list">
                        <el-checkbox-group v-model="selectTags">
                            <div v-for="(item, index) in tags" :key="index" class="tag-item">
                                <div class="tag-title">{{ item.name }}</div>
                                <div v-for="(item1, index1) in item.list" :key="index1" class="item"><el-checkbox :label="item1">{{ item1.name }}</el-checkbox></div>
                            </div>
                        </el-checkbox-group>
                    </div>
                </div>
                <div class="box right">
                    <div class="title">
                        <span>已选（{{ selectTags.length }}）</span>
                        <span class="clear-btn" @click="clearTag">清除</span>
                    </div>
                    <div class="tag-list">
                        <div v-for="(item, index) in selectTags" :key="index">
                            <el-tag closable class="tag" @close="closeTag(item, index)">{{ item.name }}</el-tag>
                        </div>
                    </div>
                </div>
            </div>
            <div slot="footer" class="dialog-footer">
                <el-button @click="dialogVisible = false">取 消</el-button>
                <el-button type="primary" @click="handleSubmit">确 定</el-button>
            </div>
        </el-dialog>
    </div>
</template>
<script>
import { tagList } from '@/api/common'
export default {
    name: 'UserTransferDialog',
    // props: {
    //     selected: {
    //         type: Array,
    //         default: () => []
    //     }
    // },
    data() {
        return {
            dialogVisible: false,
            tags: [],
            selectTags: []
        }
    },
    methods: {
        showDialog(list) {
            // this.resetParams();
            // this.resetForm();
            this.getTags();
            this.dialogVisible = true;
        },
        resetParams() {
            this.selectTags = [];
        },
        closeTag(item, index) {
            console.log(index)
            this.selectTags.splice(index, 1)
        },
        clearTag() {
            this.selectTags = []; 
        },
        handleSubmit(e) {
            if (this.selectTags.length) {
                this.$emit('success', this.selectTags)
                this.dialogVisible = false
            } else {
                this.$message({ type: 'warning', message: '未选择标签！'});
            }
        },
        // 获取 tags
        getTags() {
            tagList().then(res => {
                this.tags = res.data.tag_list || []
            })
        }
    }
}
</script>
<style lang="scss" scoped>
.action-box {
    width: 100%;
    height: 500px;
    display: flex;
    .box {
        border: 1px solid #eee;
        display: flex;
        flex-direction: column;
        .title {
            background: #eee;
            padding: 10px 10px;
            font-weight: 600;
            display: flex;
            justify-content: space-between;
            .clear-btn {
                cursor: pointer;
                &:hover {
                    color: red;
                }
            }
        }
        .tag-list {
            flex: 1;
            width: 100%;
            padding: 10px;
            box-sizing: border-box;
            overflow-y: auto;
            .tag-item {
                margin-bottom: 15px;
                .tag-title {
                    line-height: 30px;
                    border-bottom: 1px solid #eee;
                    margin-bottom: 10px;
                    font-size: 14px;
                    color: #333;
                }
                .item {
                    display: inline-block;
                    margin-bottom: 5px;
                    margin-right: 20px;
                }
            }
            .tag {
                margin-bottom: 10px;
            }
        }
    }
    .left {
        flex: 2;
        margin-right: 20px;
    }
    .right {
        flex: 1;
    }
}
</style>